<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { Descriptions, DescriptionsItem, Table } from 'ant-design-vue';

import { DefServerApi } from '#/api/devOperation/developer/defServer';
import { BasicTitle } from '#/components/basic';

const data = ref<any>({ cpu: {}, mem: {}, sys: {}, jvm: {}, sysFiles: [] });

onMounted(async () => {
  const obj = await DefServerApi.get();
  data.value = obj;
});
</script>

<template>
  <div class="bg-white p-4">
    <Descriptions bordered :column="3" label-placement="left" title="CPU">
      <DescriptionsItem>
        <template #label>CPU核</template>
        {{ data.cpu.cpuNum }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>系统使用率（%）</template>
        {{ data.cpu.sys }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>用户使用率（%）</template>
        {{ data.cpu.used }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>当前等待率（%）</template>
        {{ data.cpu.wait }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>当前空闲率（%）</template>
        {{ data.cpu.free }}
      </DescriptionsItem>
    </Descriptions>

    <Descriptions bordered :column="3" label-placement="left" title="内存">
      <DescriptionsItem>
        <template #label>内存总量（G）</template>
        {{ data.mem.total }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>已用内存（G）</template>
        {{ data.mem.used }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>剩余内存（G）</template>
        {{ data.mem.free }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>使用率（%）</template>
        {{ data.mem.usage }}
      </DescriptionsItem>
    </Descriptions>

    <Descriptions bordered :column="3" label-placement="left" title="服务器">
      <DescriptionsItem>
        <template #label>服务器名称</template>
        {{ data.sys.computerName }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>服务器Ip</template>
        {{ data.sys.computerIp }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>项目路径</template>
        {{ data.sys.userDir }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>操作系统</template>
        {{ data.sys.osName }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>系统架构</template>
        {{ data.sys.osArch }}
      </DescriptionsItem>
    </Descriptions>

    <Descriptions bordered :column="3" label-placement="left" title="虚拟机">
      <DescriptionsItem>
        <template #label>占用的内存总数(M)</template>
        {{ data.jvm.total }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>最大可用内存总数(M)</template>
        {{ data.jvm.max }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>JVM空闲内存(M)</template>
        {{ data.jvm.free }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>使用率（%）</template>
        {{ data.jvm.usage }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>Jvm名称</template>
        {{ data.jvm.name }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>JDK版本</template>
        {{ data.jvm.version }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>启动时间</template>
        {{ data.jvm.startTime }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>运行时长</template>
        {{ data.jvm.runTime }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>JDK路径</template>
        {{ data.jvm.home }}
      </DescriptionsItem>
      <DescriptionsItem>
        <template #label>运行参数</template>
        {{ data.jvm.inputArgs }}
      </DescriptionsItem>
    </Descriptions>

    <BasicTitle :normal="false" class="font-size-18 mb-4 mt-2">磁盘</BasicTitle>
    <Table
      :columns="[
        {
          title: '盘符路径',
          key: 'dirName',
          dataIndex: 'dirName',
        },
        {
          title: '盘符类型',
          key: 'sysTypeName',
          dataIndex: 'sysTypeName',
        },
        {
          title: '文件类型',
          key: 'typeName',
          dataIndex: 'typeName',
        },
        {
          title: '总大小',
          key: 'total',
          dataIndex: 'total',
        },
        {
          title: '剩余大小',
          key: 'free',
          dataIndex: 'free',
        },
        {
          title: '已经使用量',
          key: 'used',
          dataIndex: 'used',
        },
        {
          title: '资源的使用率',
          key: 'usage',
          dataIndex: 'usage',
        },
      ]"
      :data-source="data?.sysFiles"
    />
  </div>
</template>
